<template>
    <div>
        <h1>注册事件监听器</h1>
        <button @click="increment">Click me</button>
        <p>You clicked {{ count }} times</p>
    </div>
</template>


<script setup >
import {ref,onMounted,onUnmounted} from 'vue'

const count = ref(0)

const increment = () => {
    count.value++
}

const handleKeydown = (e) => {
    if (e.key === 'Enter') {
        increment()
    }
}

onMounted(() => {
    window.addEventListener('keydown',handleKeydown)
})

onUnmounted(() => {
    window.removeEventListener('keydown',handleKeydown)
})
</script>

<style></style>